<template>
  <div>
    <div>
      <!-- 搜索栏 -->
      <div class="daohang">
        <van-sticky :offset-top="1">
          <van-search
            v-model="value"
            show-action
            label=""
            placeholder="请输入搜索关键词"
            @search="onSearch"
            shape="round"
          >
            <template #left>
              <van-icon @click="chengshi" type="default" to="/chengshisuoyin"
                >{{chengss?chengss:'上海'}} ▼</van-icon
              >
            </template>
            <template #action>
              <van-icon name="guide-o" @click="ditu"></van-icon>
            </template>
          </van-search>
        </van-sticky>
      </div>

      <!-- 轮播图 -->
      <div>
        <van-swipe :autoplay="3000" indicator-color="white" class="my-swipe">
          <!-- 浏览器图片太慢了 -->
          <van-swipe-item v-for="image in images" :key="image.id" @load="lunbotu">
            <img v-lazy="`http://liufusong.top:8080${image.imgSrc}`" />
            <!-- http://liufusong.top:8080/img/swiper/2.png  -->
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 导航栏 -->
      <div>
        <van-grid>
          <van-grid-item icon="wap-home-o" text="整租" />
          <van-grid-item icon="friends-o" text="合租" />
          <van-grid-item icon="location-o" text="地图找房" />
          <van-grid-item icon="coupon-o" text="去出租" />
        </van-grid>
      </div>

      <!-- 更多 -->
      <div class="gengduo">
        <div>
          <h3>
            租房小组<router-link class="link" to="/zhuce">更多</router-link>
          </h3>
        </div>

        <!-- 广告栏 -->
        <div>
          <van-grid direction="horizontal" :column-num="2" gutter="6px">
            <van-grid-item
              icon=""
              text="家住回龙观归属的感觉"
            />
            <van-grid-item icon="" text="文字" />
            <van-grid-item icon="" text="文字" />
            <van-grid-item icon="" text="文字" />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import requesta from '@/utils/request'
import { getSwiper } from '@/api/article'
export default {
  data () {
    return {
      value: '',
      images: [],
      request: ''
    }
  },
  methods: {
    // 搜索栏
    onSearch () {},
    // 跳转地图列表
    chengshi () {
      this.$router.push('/chengshisuoyin')
    },
    // 跳转地图
    ditu () {
      this.$router.push('/ditu')
    },
    // 轮播图请求
    // getSwiper里面是传参的
    async lunbotu () {
      const res = await getSwiper()
      this.images.push(res.body)
      console.log(res)
    // console.log(requesta)
    }
  }
}
</script>

<style lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
}
img {
  width: 100%;
}
.gengduo {
  padding: 0 10px;
  background-color: #ddd;
  h3 {
    margin: 15px 0 15px 10px;
    font-size: 15px;
    .link {
      float: right;
      font-size: 14px;
    }
  }
}
</style>
